<?php
require_once('../../config.php');
require PATH_ADMIN . 'session.php';
require_once('../../classes/BannersEngine.php');

$css_arr = array(
  'banners/banners.css'
);

define('MENU_ACTIVE', 'banners');
require_once(PATH_ADMIN . 'layout/header.php');

$BannersEngine = new BannersEngine();
?>
<div class="container">

  <div class="well">
    <p>
      Agregue y edite banners, para modificar el orden solo
      arrastre el banner.
    </p>
    <a href="#" class="btn btn-primary" id="btn_add_banner">Agregar banner</a>
  </div>

  <!-- Formulario para agregar banners -->
  <a name="banner_form"></a>
  <div id="banner_form">
    <form action="banners/actions.php?action=save" method="post"
      id="frm_banner" enctype="multipart/form-data" target="iframe_upload">
      <input type="hidden" name="banner_id" id="banner_id" value="0" />
      <table class="table table-bordered">
        <tr>
          <td>
            <div class="control-group" id="control_group_nombre">
              <label for="banner_name"><strong>Nombre del banner:</strong></label>
              <div class="controls">
                <input type="text" class="input-xlarge"
                  name="banner_name" id="banner_name" />
              </div>
            </div>
          </td>
          <td>
            <label for="banner_url"><strong>URL del banner: (opcional)</strong></label>
            <div class="controls">
                <input type="text" class="input-xlarge"
                  name="banner_url" id="banner_url"/>
            </div>
          </td>
          <td>
            <label for="banner_seconds"><strong>Duración en segundos:</strong></label>
            <div class="controls">
              <select name="banner_seconds" id="banner_seconds">
                <option value="5">5 segundos.</option>
                <option value="10">10 segundos.</option>
                <option value="15">15 segundos.</option>
                <option value="20">20 segundos.</option>
              </select>
            </div>
          </td>
        </tr>
      </table>
      <table class="table table-bordered">
        <tr>
          <td>
            <label for="banner_file_en">
              <strong>Archivo de imagen en español:</strong>
            </label>
          </td>
          <td>
            <label for="banner_file_es">
              <strong>Archivo de imagen en ingles:</strong>
            </label>
          </td>
        </tr>
        <tr>
          <td class="column_select_file"><img src="images/no-banner-preview.jpg"
            class="banner_preview" id="banner_preview_es" />
            <input type="file" id="banner_file_es" name="banner_file_es" />
          </td>
          <td class="column_select_file"><img src="images/no-banner-preview.jpg"
            class="banner_preview" id="banner_preview_en" />
            <input type="file" id="banner_file_en" name="banner_file_en" />
          </td>
        </tr>
      </table>
      <div class="form-actions">
        <button type="submit" id="btn_save_banners" class="btn btn-primary">
          <i class="icon-upload icon-white"></i> Guardar banners</button>
        <button type="button" class="btn" id="btn_cancel_banner">Cancelar</button>
      </div>
    </form>
    <iframe src="about:blank" name="iframe_upload" id="iframe_upload"
      frameborder="0"></iframe>
  </div>

  <!-- Lista de banners, para seleccionar y editar -->
  <ul id="banners_rows" class="clearfix">
    <?php
    // Obtener la lista de banners y generar los elementos
    $banners = $BannersEngine->getBanners();
    foreach($banners as $banner):
      require 'banner_row.php';
    endforeach;
    ?>
  </ul>
  <!-- // Lista de banners -->

</div>
<?php
$js_arr = array(
  'bootstrap-dropdown.js',
  'jquery-ui.js',
  'banners/banners.js'
);
require_once(PATH_ADMIN . 'layout/footer.php');